import React, { PureComponent } from 'react';
import { CapsuleChart } from '@jiaminghi/data-view-react';
import axios from '../../components/service/request';

class UserSituation extends PureComponent {
  
    state = {
      administrator: 0,
      teacher: 0,
      undergraduate: 0,
      postgraduate:0,
      total:0,
    };
 
  componentDidMount() {
    const handleError = (error) => {
      console.error(error);
  };
  const handleException = (exception) => {
      console.error(exception);
  };

  axios.post('http://localhost:8080/admin/admin/lists').then(res => {
      if (res.code === 200) {
          this.setState ({
            //赋值操作
            administrator: res.data[1][0].administrators,
            teacher: res.data[1][0].teacher,
            undergraduate: res.data[1][0].undergraduate,
            postgraduate: res.data[1][0].postgraduate,
            total: res.data[1][0].userCount,
            
          });
          console.log(res);
      } else {
          console.log("获取失败");
      }
      })
      .catch (handleError)
      .catch (handleException)
  }

  render() {
    const userIdentityCategory = {
      data: [
        {
          name: '系统管理员',
          value:this.state.administrator,
          style: { color: 'red', fontSize: '25px' },
        },
        {
          name: '教师',
          value: this.state.teacher,
        },
        {
          name: '本科生',
          value: this.state.undergraduate,
          style: { color: 'green' }
        },
        {
          name: '研究生',
          value: this.state.postgraduate
        },
        {
          name: '用户总数',
          value: this.state.total
        },
        
      ],
    };
    const config = {
      ...this.state.config,
      ...userIdentityCategory,
      
    };
    const UserStyle = {
      width: '550px',
      height: '250px',
      color: '#3366FF',
      fontSize: '50px',
    };

    return (
      <div>
        <h2>用户种类分布情况</h2>
        <CapsuleChart
          config={config}
          style={UserStyle}
        />
      </div>
    );
  }
}

export default UserSituation;
